<template>
	<view class="content">
		<view class="form">
			<uni-forms :modelValue="formData" :label-width="130">
				<uni-forms-item name="name" label="姓名">
					<input type="text" v-model="formData.name" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item name="hobby" label="您的性别" class="sexbox">
					<selectSwitch :switchList="switchList" :defaultSwitch="false" checked_bj_color="#4499FB" @change="switchChange" />
				</uni-forms-item>
				<uni-forms-item name="name" label="联系地址">
					<input type="text" v-model="formData.address" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item name="name" label="工作单位">
					<input type="text" v-model="formData.workUnit" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item name="name" label="学历">
					<input type="text" v-model="educationName" placeholder="请输入" @click="showPicker = true" disabled />
				</uni-forms-item>
				<uni-forms-item name="name" label="紧急联系人" required>
					<input type="text" v-model="formData.emergencyContacts[0].name" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item name="name" label="手机号" required>
					<input type="text" v-model="formData.emergencyContacts[0].mobile" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item name="name" label="关系" required>
					<input type="text" v-model="formData.emergencyContacts[0].relationShip" placeholder="请输入" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="submit btn-primary" @click="submitForm">保存</button>
	</view>
	<u-picker :show="showPicker" :columns="eduList" keyName="label" @cancel="showPicker=false" @confirm="confirmPicker"></u-picker>
</template>
<script setup lang="ts">
	import {reactive,ref} from 'vue'
	import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
  import {getInfo, userEdit} from '@/common/API/login';
	import { getDictData } from '@/common/API/system'
	import { onLoad } from "@dcloudio/uni-app"
	onLoad(()=>{
		getEduList()
	})

	const showPicker = ref(false)
	const eduList = ref<any>([])
	const getEduList = async ()=>{
		let res = await getDictData({
			pageNo: 1,
			pageSize: 10,
			dictType: 'contract_education_grade'
		})
		eduList.value.push(res.list)
    if(uni.getStorageSync('userId')){
      getInfo().then(userInfo=>{
        Object.keys(formData).forEach((key) => {
          formData[key] = userInfo[key]
        })
        for (let i = 0;i<res.list.length;i++){
          if(res.list[i].value == userInfo.education){
            educationName.value = res.list[i].label
            break
          }
        }
      })
    }
	}
	const educationName = ref()
	const confirmPicker = (e) => {
		showPicker.value = false
		formData.education = e.value[0].value
		educationName.value = e.value[0].label
	}
	let userInfo = uni.getStorageSync('userInfo')
	const formData = reactive({
		id: userInfo.id,
		name:'',
		mobile: userInfo.mobile,
		gender: 1,
		address: '',
		workUnit: '',
		education: '',
		educationName: '',
		emergencyContacts:[
			{
				name: '',
				mobile: '',
				relationShip: '',
			}
		]
	})
	const switchList = reactive(['女','男'])

	//切换性别
	const switchChange = (e) => {
		formData.gender = e?2:1
	}
	//提交
	const submitForm = async () => {
		if(!formData.emergencyContacts[0].name){
			uni.showToast({
				title: "请输入紧急联系人",
				icon: "none"
			})
		}else if(!formData.emergencyContacts[0].mobile){
			uni.showToast({
				title: "请输入紧急联系人手机号",
				icon: "none"
			})
		}else if(!formData.emergencyContacts[0].relationShip){
			uni.showToast({
				title: "请输入紧急联系人关系",
				icon: "none"
			})
		}else{
			await userEdit(formData)
			uni.showToast({
				title: "提交成功"
			})
			setTimeout(()=>{
				uni.navigateBack()
			},2000)
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 16rpx 0 16rpx;
	.form{
		background: #fff;
		padding: 0 32rpx;
		.uni-forms-item{
			border-bottom: 2rpx solid #f5f5f5;
			margin: 0;
			height: 108rpx;
			line-height: 108rpx;
			align-items: center;
			&:last-child{
				border: none;
			}
			uni-input{
				font-size: 28rpx;
			}
			::v-deep.uni-date{
				.icon-calendar{
					display: none;
				}
				.uni-date__x-input{
					padding: 0;
					color: #777;
				}
			}
			::v-deep.uni-input-wrapper{
				text-align: right;
			}
			::v-deep.uni-forms-item__label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
			}
		}
		::v-deep.sexbox{
			.uni-forms-item__content{
				text-align: right;
				.switch-container{
					display: inline-block;
				}
			}
		}
	}
	.btn-primary{
		position: fixed;
		bottom: 30rpx;
		left: 32rpx;
		border-radius: 200rpx;
		width: 686rpx;
	}
}
.input-placeholder{
	color: rgba(204, 204, 204, 1);
}
</style>
